<template>
  <div class="main-container">
    <div id="login">
      <mt-field label="" placeholder="输入手机号" type="text" v-model="loginData.phone"></mt-field>
      <mt-field label="" placeholder="密码" type="password" v-model="loginData.password"></mt-field>
      <mt-button type="default" size='large' @click="login">登录</mt-button>
    </div>
  </div>
</template>
<script>
import { MessageBox } from 'mint-ui'

export default {
  name: 'login',
  data() {
    return {
      loginData: {
        phone: '12345687911',
        password: '123165'
      }
    }
  },
  methods: {
    login() {
      console.log(1)
      this.$store
        .dispatch('Login', this.loginData)
        .then(() => {
          this.$router.push('/')
        })
        .catch(() => {
          MessageBox('提示', '登录失败');
        })
    }
  }
}
</script>
<style lang="less" scoped>
.main-container {
  background-color: #2d3a4b;
  justify-content: center;
}
.mint-field {
  margin-bottom: 10px;
}
#login {
  padding: 0 10px;
}
</style>
